<template>
    <div>
        <el-card>

            <el-row style="padding-top: 15px;">
                <el-row>
                    <el-col :span="8" :offset="16">
                        <span>校区：</span>
                        <el-select v-model="school" placeholder="请选择" clearable size="mini" @change="choiceSchool()">
                            <el-option v-for="item in schools" :key="item.id" :label="item.campusName" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button type="primary" el-icon-plus size="mini" @click="getCurrentPageData()">
                            查询</el-button>
                    </el-col>
                </el-row>
                <el-row style="padding-top: 20px;">
                    <el-col :span="7">

                        <el-card>
                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 60%;">学员变动情况</span>
                            </el-row>
                            <el-row style=" margin-top: 10%;">
                                <el-col>
                                    <span
                                        style="font-weight: normal; font-size: smaller; margin-right: 5%; color: #9d9b9b;">新增意向学员&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除意向学员</span>
                                </el-col>
                            </el-row>
                            <el-row style=" margin-top: 3%;">
                                <span
                                    style=" font-size: x-large;  color: #2b2b2b;">{{ newStudent }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ delStudent }}</span>
                            </el-row>
                            <el-row style=" margin-top: 7%;">
                                <span
                                    style="font-weight: normal; font-size: smaller; margin-right: 5%; color: #9d9b9b; ">转化率</span>
                            </el-row>
                            <el-row style=" margin-top: 3%;height: 120px;">
                                <span style=" font-size: x-large;  color: #2b2b2b; ">{{Math.round(this.newStudent/this.delStudent)}}%</span>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-card>
                            <el-row>
                                <span style="font-weight: bold; font-size: smaller; margin-right: 60%;">学员来源招生占比</span>
                            </el-row>
                            <div id="myChart1" style="width: 300px;height: 250px; margin-right: 10%;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-card>
                            <span style="font-weight: bold; font-size: smaller; margin-right: 60%;">学员人数趋势图</span>
                            <div id="myChart" style="width: 300px;height: 250px;"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-row>

        </el-card>
        <el-card style="margin-top: 2%;">
            <el-row>
                <el-col :span="7">
                    <span>招生来源：</span>
                    <el-select v-model="studentSource" placeholder="请选择" clearable size="mini" @change="choiceSource()">
                        <el-option v-for="item in studentSources" :key="item.id" :label="item.source" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="7">
                    <span>搜索：</span>
                    <el-input v-model="student" placeholder="请输入学生姓名搜索" style="width: 180px;" size="mini"
                        clearable></el-input>
                </el-col>
                <el-col :span="10">
                    <span>选择日期：</span>
                    <el-date-picker v-model="timeValue" type="daterange" value-format='yyyy-MM-dd' start-placeholder="开始日期"
                        end-placeholder="结束日期" size="small">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-row style="margin-top: 2%; margin-left: 35%;">
                <RouterLink to="/psAdd">
                    <el-button type="primary" el-icon-plus size="mini" icon="el-icon-plus"> 添加</el-button>
                </RouterLink>
                <RouterLink to="/clue">
                    <el-button type="primary" el-icon-plus size="mini"> 线索列表</el-button>
                </RouterLink>
                <!-- <el-button type="primary" el-icon-plus size="mini"> 试听列表</el-button> -->
                <el-button type="primary" el-icon-plus size="mini" @click="download()"> 导出学员</el-button>
                <el-button type="primary" el-icon-plus size="mini" @click="downloadModel()"> 下载导入模板</el-button>
                <el-button type="primary" el-icon-plus size="mini" @click="addfile"> 导入学员</el-button>
                <RouterLink to="/PSDelDeatail">
                    <el-button type="primary" el-icon-plus size="mini"> 删除记录</el-button>
                </RouterLink>
                <el-popconfirm confirm-button-text='好的' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                    @confirm="handleDelete()" title="确定删除吗？">
                    <el-button type="danger" size="mini" slot="reference" :disabled="multiple">删除</el-button>
                </el-popconfirm>

            </el-row>
            <el-row>
                <el-table :data="tableData" stripe style="margin-top: 20px;" border
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="studentName" label="学员姓名">
                    </el-table-column>
                    <el-table-column prop="gender" label="性别">
                    </el-table-column>
                    <el-table-column prop="birthdate" label="出生日期">
                    </el-table-column>
                    <el-table-column prop="cellphone" label="联系电话">
                    </el-table-column>
                    <el-table-column prop="campus" label="咨询校区">
                    </el-table-column>
                    <el-table-column prop="source" label="招生来源">
                    </el-table-column>
                    <el-table-column prop="createTime" label="录入时间">
                    </el-table-column>
                    <el-table-column prop="teacher" label="录入人">
                    </el-table-column>
                    <el-table-column label="编辑" width="180">
                        <template slot-scope="scope">
                            <!-- <el-link  :underline="false" type="primary" style="font-size: 12px"
                            @click="signUp(scope.row.id)">报名</el-link> -->
                            <el-link :underline="false" type="primary" style="font-size: 12px"
                                @click="update(scope.row.id)">编辑</el-link>
                            <el-link :underline="false" type="primary" style="font-size: 12px"
                                @click="detail(scope.row.id)">详情</el-link>
                            <!-- <el-link  :underline="false" type="primary" style="font-size: 12px"
                            @click="trial(scope.row.id)">试听</el-link> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[7]" :page-size="size"
                        layout="sizes, prev, pager, next, jumper,total" :total="total">
                    </el-pagination>
                </el-row>
            </el-row>
        </el-card>
        <el-dialog title="批量导入学生" :visible.sync="dialogVisible" width="15%">
            <el-upload ref="upload" action="#" list-type="text" :on-preview="handlePictureCardPreview"
                :on-change="choosefile" :on-remove="handleRemove" accept="application/vnd.ms-excel" :auto-upload="false">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="importStudentsCancel">取 消</el-button>
                <el-button type="primary" @click="importStudents">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "eCharts",
    data() {
        return {
            myChart2: '',
            school: '',
            schools: [],
            studentSource: '',
            studentSources: [],
            student: '',
            tableData: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            currentPage: 1,     // 当前页页码
            size: 7,            // 当前页大小
            total: 0,
            timeValue: [new Date(2023, 8, 1, 8, 40), new Date(2025, 9, 10, 9, 40)],
            dialogVisible: false,
            files: [],
            options: {},
            mainoptions: {},
            xAxisData: [],
            seriesData: [],
            mainoptions: {},
            resources: [],
            newStudent:'',
            delStudent:'',
            retention:'',
        };
    },
    methods: {
        importStudents() {
            let formdata = new FormData();
            formdata.append("file", this.files[0].raw)
            this.$axios.post("/prospectiveStudent/importStudents", formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {
                if (res.data.code = 200) {
                    this.$message.success("批量导入成功");
                    this.dialogVisible = false;
                    this.$refs.upload.clearFiles();
                    this.getCurrentPageData()
                } else {
                    this.$message.error("批量导入失败")
                }
            })
        },
        addfile() {
            if (this.files.length > 0) {
                this.$refs.upload.clearFiles();
            }
            this.dialogVisible = true;
        },
        choosefile(file, fileList) {
            this.files = fileList;
            console.log(this.files);
            console.log(file);
        }
        ,
        handleRemove(file, fileList) {
            console.log(file, fileList);
        }
        ,
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        importStudentsCancel() {
            this.dialogVisible = false;
            this.$refs.upload.clearFiles();
        },
        download: function () {
            this.$axios.get("/prospectiveStudent/export", {
                responseType: 'blob'
            }).then(res => {
                // 获取Blob数据
                const blobData = res.data;

                // 创建一个URL对象
                const url = window.URL.createObjectURL(new Blob([blobData]));

                // 创建一个a标签，并设置href属性为URL
                const link = document.createElement('a');
                link.href = url;

                // 设置下载的文件名（可根据后端返回的响应头设置）
                link.setAttribute('download', '学生信息.xlsx');

                // 将a标签添加到页面中，并点击进行下载
                document.body.appendChild(link);
                link.click();

                // 清除URL对象
                window.URL.revokeObjectURL(url);
            }).catch(error => {
                // 处理错误
            });
        },
        downloadModel: function () {
            this.$axios.get("/prospectiveStudent/exportModel", {
                responseType: 'blob'
            }).then(res => {
                // 获取Blob数据
                const blobData = res.data;

                // 创建一个URL对象
                const url = window.URL.createObjectURL(new Blob([blobData]));

                // 创建一个a标签，并设置href属性为URL
                const link = document.createElement('a');
                link.href = url;

                // 设置下载的文件名（可根据后端返回的响应头设置）
                link.setAttribute('download', '学生信息模板.xlsx');

                // 将a标签添加到页面中，并点击进行下载
                document.body.appendChild(link);
                link.click();

                // 清除URL对象
                window.URL.revokeObjectURL(url);
            }).catch(error => {
                // 处理错误
            });
        },
        //分页
        handleSizeChange(val) { // 页面大小修改时触发
            console.log(`1每页 ${val} 条`);
        },
        handleCurrentChange(val) { // 页码修改时触发
            console.log(`1当前页: ${val}`);
            // 给当前页属性赋值
            this.currentPage = val
            // 发请求获取数据
            this.getCurrentPageData()
        },
        choiceSchool: function () {
            console.log(this.school)
        },
        choiceSource: function () {
            console.log(this.studentSource)
        },

        getCurrentPageData: function () {
            // 页面加载时需要将当前页、页大小作为参数传给后台  key=value 传值
            //  /money/tenement?page=1&size=10
            let data = {
                schoolId: this.school,
                sourceId: this.studentSource,
                studentName: this.student,
                time: this.timeValue,
                page: this.currentPage,
                size: this.size
            }
            this.$axios.post("/prospectiveStudent/findByPSPage", data).then(res => {
                console.log(res.data)
                this.tableData = res.data.data.data
                // 总条数
                this.total = res.data.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            console.log(selection);
            this.ids = selection.map(item => item.id);// 需要根据数据情况调整id名称
            console.log(this.ids);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        handleDelete() {
            //传数组进行批量删除
            this.$axios.post("/prospectiveStudent/delPS", this.ids).then(result => {
                if (result.data.data == true) {
                    //this.loadOperLogByPage(this.current);
                    this.$message.success("删除成功")
                    this.getCurrentPageData()
                }
            })
        },
        //报名
        signUp: function (id) {
            this.$router.push("/psUpdate/" + id)
        },
        //修改
        update: function (id) {
            this.$router.push("/psUpdate/" + id)
        },
        //详情
        detail: function (id) {
            this.$router.push("/PSDetail/" + id)
        },
        //试听
        trial: function (id) {
            this.$router.push("/psUpdate/" + id)
        },
        //添加线索
        addClue: function (id) {
            this.$router.push("/psUpdate/" + id)
        },
        drawLine1() {
            // 基于准备好的dom，初始化echarts实例
            let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
            myChart1.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    orient: 'vertical',
                    left: 'buttom'
                },
                series: [
                    {
                        name: '招生占比',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ["65%", "50%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center',

                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 30,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.resources
                    }
                ]
            });
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("myChart"));
            // 绘制图表
            myChart.setOption({
                title: {},
                tooltip: {},
                xAxis: {
                    data: this.xAxisData,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "人数",
                        type: "line",
                        data: this.seriesData,
                    },
                ],
            });
        },
        findCountGroupByDate() {
            this.$axios.get("/prospectiveStudent/findCountGroupByDate").then(res => {
                if (this.xAxisData.length > 0) {
                    this.xAxisData = [];
                }
                if (this.seriesData.length > 0) {
                    this.seriesData = [];
                }
                let data = res.data.data;
                console.log(data);
                for (let datum of data) {
                    this.xAxisData.push(datum.addTime)
                    this.seriesData.push(datum.count)
                }
                this.drawLine();
            })
        },
        findResource() {
            this.$axios.get("/prospectiveStudent/findPie").then(res => {
                this.resources = res.data.data;
                console.log(this.resources)
                this.drawLine1();
            })
        },
    },
    mounted() {
        this.findCountGroupByDate()
        this.getCurrentPageData(),
            this.findResource()
        this.drawLine()
        this.drawLine1()
        this.$axios.get("/dynamic/choiceSchool").then(res => {
            this.schools = res.data.data
        })
        this.$axios.post("/prospectiveStudent/findBySource").then(res => {
            this.studentSources = res.data.data
        })
        this.$axios.get("/prospectiveStudent/newStudent").then(res => {
            this.newStudent = res.data.data
        })
        this.$axios.get("/prospectiveStudent/delStudent").then(res => {
            this.delStudent = res.data.data
        })
        
    },
};
</script>



<style scoped></style>


<style scoped></style>